<template>
	<view class="content">
		<view class="item" v-for="(item,index) in recordDev" :key="index">
			<view class="left">
				<view class="one">
					¥{{item.amount}}
				</view>
				<view class="two">
					{{item.createDate}}
				</view>
			</view>
			<view class="right">
				<view class="right_one" v-if="item.status==0" @click="receiveData(item.id)">
					领取
				</view>
				<view class="right_two" v-else @click="receiveData(item.id)">
					已领取
				</view>
			</view>
		</view>

	
		
	
	
	</view>
</template>

<script>
	import {
		getWheelDrewRecordPage,receiveDataApi
	} from "../../../api/results.js"

	export default {
		components: {

		},
		data() {
			return {
				pageIndex: 0, //页数
				pageSize: 100000, //条数
				total: 1,
				recordDev:[],
				nikeName:'',
			}
		},
		onLoad(option) {
				this.getWheelDrewRecordPage();


		},
		// 上拉加载更多
		onReachBottom() {
			this.getWheelDrewRecordPage()
		},
		methods: {
			async receiveData(id){
				let params = {
					id:id
				};
				const res = await receiveDataApi(params);
				console.log(9999,res)
				if(res.data.message=='success'){
					uni.showToast({
						title:"领取成功",
						icon: "none"
					})
					this.getWheelDrewRecordPage();
				}
			},
			toBack(){
			uni.navigateBack({
				delta:1
			})
			},
			async getWheelDrewRecordPage(){
				// if (this.recordDev.length >= this.total) return
				let params = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}
				const res =await getWheelDrewRecordPage(params)
				// console.log(666,res)
				if(res.statusCode === 200){
					this.recordDev = res.data.data === null ? [] : [...this.recordDev, ...res.data.data.rows]
					this.total = res.data.data.total
					// this.pageIndex++
				}
				
			},
			addressCheck(id) {
				console.log(777,id)
			}


		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
		background-size: 100%;

	}
</style>
<style lang="scss" scoped>
	.content {
		text-align: center;
		align-items: center;
		.item{
			height: 120rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			margin: 20rpx 29rpx auto 32rpx;
			border-radius: 16rpx;
			.left{
				height: 120rpx;
				display: flex;
				width: 80%;
				.one{
					height: 120rpx;
					padding-left: 20rpx;
					padding-right: 30rpx;
					// width: 250rpx;
					background-color: #C0191F;
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
					text-align: center;
					line-height:120rpx ;
					border-bottom-left-radius: 16rpx;
					border-top-left-radius: 16rpx;
				}
				.two{
					height: 120rpx;
					padding-left: 30rpx;
					text-align: center;
					line-height:120rpx ;
					color: #7E787D;
					font-size: 28rpx;
				}
			}
			.right{
				height: 120rpx;
				width: 20%;
				text-align: center;
				.right_one{
					height: 60rpx;
					width: 100rpx;
					background-color: #F93533;
					text-align: center;
					line-height: 60rpx;
					margin-top: 30rpx;
					border-radius: 16rpx;
					color: #FBFAFC;
				}
				.right_two{
					height: 60rpx;
					width: 100rpx;
					background-color: #2a1710;
					text-align: center;
					line-height: 60rpx;
					margin-top: 30rpx;
					border-radius: 16rpx;
					color: #FBFAFC;
				}
			}
		}


		}
</style>
